<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>城市三级联动</title>
</head>
<body>
    <!--三级联动html基本框架-->
    <form>
      <select id="province"><!--身份选择-->
          <option value="-1">请选择</option> <!--默认值请选择可以用-1来表示-->
      </select>
      <select id="city"></select> <!--城市选择-->
      <select id="country"></select><!--区域选择-->
    </form>
    
</body>
<script>
    //三级联动
    var provinceArr=["湖南省","湖北省","浙江省"];  //省份数组
    var cityArr=[
        ["长沙市","株洲市","湘潭市","邵阳市"],
        ["武汉市","黄冈市","清江市"],
        ["杭州","温州市"]
    ];
    var countryArr=[
        [
            ["天心区","岳麓区","雨花区","望城区","开福区"],
            ["荷塘区","天元区"],
            ["岳塘区","雨湘区"],
            ["大祥区","双清区"]
        ],
        [
            ["江岸区","汉阳区","武昌区"],
        ],
        [
            ["黄冈区"]
        ]
    ];

    //第一步 创建好数据填充的方法
    function createOption(obj,data){ //obj Option对象 data代表我们需要填充的数据
       for(var i in data){
           var opt=new Option(data[i],i);//通过遍历数组的下标数组元素添加至Option
           obj.options.add(opt);
       }
    }
    //第二步  获取option对象
     var province=document.getElementById("province");//省份
     createOption(province,provinceArr);//将省份数据添加到option对象
     var city=document.getElementById("city");//城市
     province.onchange=function(){
           city.options.length=0; //清空city下的原option
           createOption(city,cityArr[province.value]);//通过省份点击后选择的数据来获取与城市对应的下标数据
           if(province.value>=0){
               city.onchange();//当用户没有选择默认选项，则将城市的数据填充到select
           }else{
               city.options.length=0; //如果用户点击默认选项，则清空city下拉框数据
           }
     };
     var country=document.getElementById("country");//区域
     city.onchange=function(){
         country.options.length=0;//为了防止在三个选择框都选中的情况下，country下标依旧为0的情况
         createOption(country,countryArr[province.value][city.value]);//通过省份，城市的下标来获取区域的值
     };
</script>
</html>